<template>
  <Card
    title="职位信息"
  >
    <a-table
      v-bind="tableProps"
      row-key="id"
    />
  </Card>
</template>

<script>
import { getGroupUsers } from '@/api/flow/group'
import { Card } from '@/components'
import table from '@/utils/mixins/table'
import props from '../mixins/props'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '账号',
    dataIndex: 'username',
  },
  {
    title: '职位',
    dataIndex: 'position_name',
  },
  {
    title: '部门',
    dataIndex: 'department_name',
  },
  // {
  //   title: '角色',
  //   dataIndex: 'role',
  // },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
]

export default {
  mixins: [table, props],

  components: {
    Card,
  },

  data () {
    return {
      columns,
    }
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, { gid: this.gid }]
    },
  },

  created () {
    this.tableHooksRequest()
  },

  methods: {
    async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getGroupUsers, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-sm;
  .delete-button {
    margin-left: $margin-sm;
  }
}
</style>
